<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#top{
				width: 800px;

				background: red;
				margin: 0 auto;
				position: relative;
			}
			#top #x{
				position: absolute;
				top: 5px;
				right: 5px;
				background: wheat;
				font-size: 20px;
				display: block;
				width: 20px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				cursor: pointer;
				border: 0;
			}
			#top #x:hover{
				color: red;
			}
			#body{
				width: 800px;
				height: 2000px;
				background: blue;
				margin: 0 auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var x = document.getElementById("x");
				var top = document.getElementById("top");
				//2.给x来点击事件
				x.onclick = function(){
//					top.style.display = 'none';
					setInterval(function(){
						//3.获得旧高度
						var oldHeight = top.style.height;
						//4.设置新高度
						var newHeight = parseInt(oldHeight)-20;
						//5.赋值回去
						top.style.height = newHeight + 'px';
					},100)
				}
			}
		</script>
	</head>
	<body>
		<div id="top" style="height: 100px;">
			<button id="x">X</button>
		</div>
		<div id="body"></div>
	</body>
</html>
